/* 公共配置 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const projectConfig = require('../project.config')
const { traverseTheFile } = require('./util.js')
const MyHtmlPlugin = require('./my-html-plugin.js')
const MyCssPlugin = require('./my-css-plugin.js')

let _options = {
  srcPath: projectConfig.srcPath, // 源文件目录
  outPath: projectConfig.outPath, // 存放打包之后文件的目录
  exclude: projectConfig.exclude || [],
  notFile: projectConfig.notFile || [],
}

// 处理 exclude 为绝对路径
_options.exclude = _options.exclude.map(m => {
  return path.normalize(_options.srcPath + '/' + m)
})

// 处理 exclude 为绝对路径
_options.notFile = _options.notFile.map(m => {
  return path.normalize(_options.srcPath + '/' + m)
})

// console.log(_options.exclude);

let srcFiles = traverseTheFile(_options.srcPath) // 源文件列表
let entryOptions = {} // 导出的文件列表
let pluginsOptions = [] // plugin 列表
let copyFiles = []

srcFiles.forEach(m => {
  // 处理路径得到输出文件的名称，带有部分路径，如 js/index 这样打包的时候会生成js文件夹
  let name = m.path.replace(_options.srcPath, '').replace(/^\\/, '').replace(/\\/g, '/').replace(/\.js$/, '')

  // notFile 中的文件交给 webpack 自己处理
  if (_options.notFile.includes(m.path)) {

  }
  // exclude 中的文件直接复制
  else if (_options.exclude.includes(m.path)) {
    copyFiles.push({
      from: m.path,
      to: m.path.replace(_options.srcPath, _options.outPath)
    })
  }
  // html 文件使用 html-webpack-plugin 插件和自定义插件 my-html-plugin 处理
  else if (m.extname === '.html') {
    pluginsOptions.push(
      new HtmlWebpackPlugin({
        template: m.path,
        filename: path.join(_options.outPath, m.path.replace(_options.srcPath, '')),
        // chunks: ['*']
        inject: false,
        minify: true, // 是否压缩代码
      })
    );

    pluginsOptions.push(
      new MyHtmlPlugin({
        filePath: m.path,
        srcFiles: srcFiles,
        ..._options
      })
    );
  }
  // js 文件使用webpack处理
  else if (m.extname === '.js') {
    entryOptions[name] = m.path
  }
  // css 和 scss 文件使用自定义插件 MyCssPlugin 处理
  else if (/\.(css|scss|sass)$/.test(m.extname)) {
    pluginsOptions.push(
      new MyCssPlugin({
        filePath: m.path,
        srcFiles: srcFiles,
        ..._options
      })
    )
  }
  // 其他格式的文件直接copy
  else {
    copyFiles.push({
      from: m.path,
      to: m.path.replace(_options.srcPath, _options.outPath)
    })
  }
});

module.exports = {
  // 入口文件
  entry: {
    ...entryOptions
  },

  // 出口文件
  output: {
    filename: '[name].[hash:8].js', /* 注意这里的hash长度与 my-html-plugin 和 my-css-plugin 中的要一致，默认都是8位 */
    path: _options.outPath
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        // include: /src/,          // 只转化src目录下的js
        exclude: /node_modules/,  // 排除掉node_modules，优化打包速度
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      // {
      //   test: /\.(css|scss|sass)$/i,
      //   use: [
      //     { loader: 'style-loader' },
      //     { loader: 'css-loader', options: { importLoaders: 2 } },
      //     { loader: 'postcss-loader' },
      //     { loader: 'sass-loader' }
      //   ]
      // }
    ]
  },
  // 对应的插件
  plugins: [
    new CopyWebpackPlugin({
      patterns: [...copyFiles]
    }),
    ...pluginsOptions
  ],

  // 开启调试
  devtool: 'source-map'
}
